import { MyDialog } from "@/component/common/myDialog";
import MyTable from "@/component/common/myTable";
import TableSelects from "@/component/common/tableSelects/tableSelects";
import quesApi from "@/pages/bank/question/api";
import { Input, ModalProps, Tag } from "antd";
import { useEffect, useMemo, useState } from "react";

const columns: any = [
  {
    title: "预览",
    dataIndex: "id",
    key: "id",
    align: "center",
    render: (text: any, record: any) => {
      return record.title;
    },
  },
  {
    title: "类型",
    dataIndex: "type_name",
    key: "type_name",
    align: "center",
  },
  {
    title: "标签",
    dataIndex: "tagNames",
    key: "tagNames",
    align: "center",
    render: (text: any, record: any) => {
      return record.tagNames?.map((item: any) => {
        return <Tag key={item}>{item}</Tag>
      })
    },
  },
];

interface QuesDialogProps extends ModalProps {
  selectedQues?: Array<number>
  isOpen?: boolean
  onFinish?: (ques: any[]) => void
}
export default function QuesDialog(props: QuesDialogProps) {
  const { selectedQues = [], onFinish = () => { }, isOpen = false } = props
  const [loading, setLoading] = useState<boolean>(false);
  const [questionState, setQuestionState] = useState({
    tableData: [],
    total: 0,
  });
  const [selectedRows, setSelectedRows] = useState<number[]>(selectedQues);
  useEffect(() => {
    setSelectedRows(selectedQues)
  }, [selectedQues])
  const [searchParams, setSearchParams] = useState({
    pageNum: 1,
    pageSize: 20,
    title: "",
    type: "",
  });
  const [currentQuestion, setCurrentQuestion] = useState<any>({
    title: "",
    data: [],
    tagIds: [],
  });

  // 获取题目列表
  const getQuestions = (params: any) => {
    setLoading(true);
    quesApi.getQues(params).then((data: any) => {
      setQuestionState((oldV) => {
        return {
          ...oldV,
          tableData: data.ques.map((item: any) => {
            return { ...item, data: JSON.parse(item.data), answer: JSON.parse(item.answer), tagNames: item.tagNames?.split(','), tagIds: item.tagIds?.split(',') };
          }),
          total: data.total,
        };
      });
      setTimeout(() => {
        setLoading(false);
      }, 300);
    });
  };

  useEffect(() => {
    getQuestions(searchParams);
  }, [searchParams])
  // 过滤器组件
  const Filter = () => {
    const tableOptions = [
      {
        render: (
          <Input
            key="title"
            placeholder="请输入题目标题"
            value={searchParams.title}
            allowClear
            onChange={(e) => {
              setSearchParams((oldV) => {
                return { ...oldV, title: e.target.value };
              });
            }}
          />
        ),
      },
      {
        render: (
          <Input
            key="type"
            placeholder="请输入题目类型"
            value={searchParams.type}
            allowClear
            onChange={(e) => {
              setSearchParams((oldV) => {
                return { ...oldV, type: e.target.value };
              });
            }}
          />
        ),
      },
    ];
    return (
      <TableSelects
        loading={loading}
        options={tableOptions}
        source={searchParams}
        onSearch={() => {
          getQuestions(searchParams)
        }}
      ></TableSelects>
    );
  };
  // 表格组件
  const Table = useMemo(() => {
    const rowSelection = {
      onChange: (selectedRowKeys: any, selectedRows: any) => {
        setSelectedRows(selectedRows);
      },
      getCheckboxProps: (record: any) => ({
        disabled: false,
      }),
      selectedRowKeys: selectedRows.map((item: any) => item.id),
    };
    return (
      <MyTable
        loading={loading}
        rowSelection={rowSelection}
        rowKey={(record) => record.id}
        dataSource={questionState?.tableData}
        columns={columns}
        pageSize={searchParams.pageSize}
        total={questionState.total}
        height="50vh"
        onPaginationChange={(pageNum, pageSize) => {
          setSearchParams((oldV) => {
            getQuestions({
              ...oldV,
              pageNum,
              pageSize
            })
            return {
              ...oldV,
              pageNum,
              pageSize
            }
          })
        }}
        onRow={(record) => ({
          onClick: () => {
            setCurrentQuestion({ ...record });
          },
        })}
      ></MyTable>
    );
  }, [loading, questionState?.tableData, questionState.total, searchParams.pageSize, selectedRows]);

  return (
    <MyDialog open={isOpen} width="80%" onOk={() => { onFinish(selectedRows) }} {...props}>
      {Filter()}
      {Table}
    </MyDialog>
  )
}